<template>
  <div>
    <div class="button-container">
      <div class="button-text">{{ name }}</div>
      <div class="button-menu">
        <a-menu v-model="current" mode="horizontal" @click=changeSort>
          <a-menu-item key="gmt_create">
            最新
          </a-menu-item>
          <a-menu-item key="blog_goods">
            点赞最多
          </a-menu-item>
          <a-menu-item key="blog_comment">
            评论最多
          </a-menu-item>
          <a-menu-item key="blog_read">
            阅读最多
          </a-menu-item>
          <a-menu-item key="blog_collection">
            收藏最多
          </a-menu-item>
        </a-menu>
      </div>
    </div>

    <div class="blog-list-container">
      <a-card v-for="item in blogList" :key="item.blogId" :body-style="blogBodyStyle" class="blog-card">
        <div class="blog-main">
          <div v-if="item.blogImage" class="blog-image">
            <img :src="item.blogImage" class="blog-cover">
          </div>
          <router-link to="/info/1" class="blog-container">
            <div class="blog-title">{{item.blogTitle}}</div>
            <div class="blog-comment">{{item.blogRemark}}</div>
            <div class="blog-bottom">
              <div class="blog-type">
                分类：<a-tag color="green">{{typeMap[item.blogType]}}</a-tag>
              </div>
              <div class="blog-meta">
                <div class="blog-time">{{item.gmtCreate}}</div>
                <div class="blog-other">
                  <a-icon type="eye" />{{item.blogRead}}
                  <a-icon type="heart" />  {{item.blogCollection}}
                  <a-icon type="like" />{{item.blogGoods}}
                  <a-icon type="message" />{{item.blogComment}}
                </div>
              </div>
            </div>
          </router-link>
        </div>
      </a-card>
    </div>

    <div class="blog-pagination">
      <a-pagination :show-total="blogTotal => `共 ${blogTotal} 条`" show-quick-jumper :default-current="page.currentPage"  :total="blogTotal" @change="pageChange" />
    </div>

  </div>
</template>

<script>

import blogApi from '@/api/blog'
import typeApi from '@/api/type'
export default {
  props: {
    name: {    //父向子传值
      type: String,
      default: '博客'
    }
  },
  data() {
    return {
      typeMap:[],//类别map
      current: ["gmt_create"],
      blogBodyStyle: {
        padding: '18px'
      },
      page:{   //查询对象封装
        currentPage:1,
        currentSize:10,
        sortColumn:'gmt_create',
        sortMethod:'desc'
      },
      blogList:[], //博客详情页
      blogTotal:0 //总数
    }
  },
  created(){
     this.getByPage()
     this.getTypeToMap()
  },
  methods: {
    changeSort(item,key,keyPath){
    if(item.key === this.page.sortColumn){
      if(this.page.sortMethod === 'desc'){
        this.page.sortMethod = 'asc'
        this.getByPage()
      }else{
        this.page.sortMethod = 'desc'
        this.getByPage()
      }
    }else{
        this.page.sortColumn = item.key
        this.page.sortMethod = 'desc'
        this.getByPage()
      }
    },
    //获取类型封装成map的方法
    getTypeToMap(){
        typeApi.getTypeMap().then(
          response =>{
            this.typeMap = response.data.typeMap
          }
        )
    },
    //
    getByPage(){
      blogApi.getByPage(this.page).then(
        res =>{
              this.blogList = res.data.records
              this.blogTotal = res.data.total
              console.log('blogList',this.blogList);
              
        }
      )
    },
    pageChange(pageNumber) {
      console.log('Page: ', pageNumber)
      this.page.currentPage = pageNumber
      this.getByPage()
      
    }
  }
}
</script>

<style scoped>
.button-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 5px;
  align-items: center;
  line-height: 70px;
}

.button-text {
  font-size: 20px;
}

.ant-menu-horizontal {
  border-bottom: none !important;
}

.ant-menu {
  background: none !important;
}

a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #3e4149;
}

.blog-container {
  width: 550px;
  min-height: 130px;
}

a:hover {
  color: #3e4149;
}

.blog-title {
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 10px;
}

.blog-comment {
  margin-bottom: 10px;
  font-size: 14px;
  color: #9c9ea8;
  line-height: 22px;
  max-height: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.blog-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.blog-meta {
  font-size: 12px;
  color: #9c9ea8;
}

.blog-image {
  width: 230px;
  margin-right: 20px;
}

.blog-cover {
  width: 100%;
  border-radius: 5px;
}

.blog-card {
  margin-bottom: 15px;
  border-radius: 5px;
}
</style>
